<template>
  <div class="app-container">
    <el-form ref="dynamicValidateForm" :model="config" label-width="120px" size="mini">
      <el-form-item label="选项数量设置">
        <el-col :span="2">
          <el-input v-model.number="config.choiceMin" placeholder="最少选项数" />
        </el-col>
        <el-col :span="2" class="line">-</el-col>
        <el-col :span="2">
          <el-input v-model.number="config.choiceMax" placeholder="最大选项数" />
        </el-col>
      </el-form-item>
      <el-form-item label="反馈意见设置">
        <el-col :span="2">
          <el-input v-model.number="config.textMin" placeholder="最少字数" />
        </el-col>
        <el-col :span="2" class="line">-</el-col>
        <el-col :span="2">
          <el-input v-model.number="config.textMax" placeholder="最多字数" />
        </el-col>
      </el-form-item>
      <el-form-item label="反馈图片设置">
        <el-col :span="2">
          <el-input v-model.number="config.imgMin" placeholder="最少图片数" />
        </el-col>
        <el-col :span="2" class="line">-</el-col>
        <el-col :span="2">
          <el-input v-model.number="config.imgMax" placeholder="最大图片数" />
        </el-col>
      </el-form-item>
      <el-form-item
        v-for="(choice, index) in config.choices"
        :key="choice.key"
        :label="'选项' + (index+1)"
        :prop="'choices.' + index + '.title'"
        :rules="{ required: true, message: '选项名不能为空', trigger: 'blur' }"
      >
        <el-col :span="8">
          <el-input v-model="choice.title" placeholder="选项名称" maxlength="15" show-word-limit />
        </el-col>
        <el-col :span="1">
          <el-button type="danger" icon="el-icon-delete" circle style="margin-left: 10px" @click.prevent="removeChoice(choice)" />
        </el-col>
        <el-col :span="1">
          <el-button type="primary" icon="el-icon-plus" circle style="margin-left: 10px" @click.prevent="addChoice" />
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('dynamicValidateForm')">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { feedbackConfig, feedbackConfigUpdate } from '@/api/feedback'
export default {
  data() {
    return {
      config: {
        choiceMin: 0,
        choiceMax: 1,
        textMin: 0,
        textMax: 0,
        imgMin: 0,
        imgMax: 1,
        platform: 0,
        choices: [{
          title: ''
        }]
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      feedbackConfig({}).then(response => {
        if (response.code === 200) {
          const config = response.body.config
          this.config.choiceMin = config.choiceMin
          this.config.choiceMax = config.choiceMax
          this.config.textMin = config.textMin
          this.config.textMax = config.textMax
          this.config.imgMin = config.imgMin
          this.config.imgMax = config.imgMax
          if (response.body.checkBox.length === 0) {
            this.config.choices.push({ title: '' })
          } else {
            this.$set(this.config, 'choices', [])
            const checkbox = response.body.checkBox
            for (let i = 0; i < checkbox.length; i++) {
              this.config.choices.push(checkbox[i])
            }
          }
        } else {
          this.$message.warning('数据加载失败')
        }
      })
    },
    removeChoice(item) {
      if (this.config.choices.length === 1) {
        this.$message.warning('至少有一个选项')
        return
      }
      var index = this.config.choices.indexOf(item)
      if (index !== -1) {
        this.config.choices.splice(index, 1)
      }
    },
    addChoice() {
      this.config.choices.push({
        title: '',
        key: Date.now()
      })
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          feedbackConfigUpdate(this.config).then(response => {
            if (response.code === 200) {
              this.fetchData()
              this.$message.success('保存成功')
            } else {
              this.$message.error(response.message)
            }
          })
        } else {
          return false
        }
      })
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

